<template>
	<view class="dynamic_bg">
		<view class="dynamic_per" v-for="(item,index) in dynamic" :key="index">
			<view class="dynamic_avatar">
				<image :src="item.avatar" mode="" @click="preImage(item.avatar)"></image>
			</view>
			<view class="dynamic_right">
				<view class="dynamic_name">{{item.name}}</view>
				<view class="dynamic_text">{{item.content}}</view>
				<view class="dynamic_food_image">
					<image :src="item.foodImage" mode="" @click="preImage(item.foodImage)"></image>
				</view>
				<!-- 赞，评论，转发 -->
				<view class="love_comment_zhuanfa">
					<view class="love_comment">
						<view class="love">
							<uni-icons type="heart" v-show="!item.isZan" size="24" @click="toZan(item)"></uni-icons>
							<uni-icons type="heart-filled" v-show="item.isZan" color="red" size="24" @click="cancelZan(item)"></uni-icons>
							<text class="zan_comment_zhuanfa_count_font">{{item.zan}}</text>
						</view>
						<view class="comment">
							<uni-icons type="chatbubble" size="24"></uni-icons>
							<text class="zan_comment_zhuanfa_count_font">{{item.comment}}</text>
						</view>
					</view>
					<view class="zhuanfa">
						<uni-icons type="redo" size="24"></uni-icons>
						<text class="zan_comment_zhuanfa_count_font">{{item.zhaunfa}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { dynamic } from '../../datas/dynamic.js'
	export default {
		data() {
			return {
				dynamic: dynamic,
			}
		},
		methods: {
			// 点击头像或者图片预览图片
			preImage(url){
				const urls = [
					url
				]
				uni.previewImage({
					urls:urls,
				})
			},
			
			// 去点赞
			toZan(item){
				this.dynamic.forEach((item1)=>{
					if(item.name == item1.name){
						// 点赞
						item1.isZan = true
						// 点赞数+1
						item1.zan += 1
					}
				})
			},
			
			// 取消赞
			cancelZan(item){
				this.dynamic.forEach((item1)=>{
					if(item.name == item1.name){
						// 取消点赞
						item1.isZan = false
						// 点赞数+1
						item1.zan -= 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dynamic_bg {
		width: 100%;
		min-height: 100vh;
		background-color: #fffae8;
		padding: 10px;
	}
	
	.dynamic_per{
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
	}
	
	.dynamic_avatar{
		width: 18%;
	}
	
	.dynamic_avatar>image{
		width: 50px;
		height: 50px;
		border-radius: 5px;
	}
	
	.dynamic_right{
		width: 75%;
	}
	
	.dynamic_food_image>image{
		width: 270px;
		height: 220px;
		border-radius: 10px;
	}
	
	.dynamic_name{
		color: #579fdd;
		margin-bottom: 10px;
	}
	
	.dynamic_text{
		margin-bottom: 10px;
		color: #616161;
	}
	
	.love_comment_zhuanfa{
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	
	.love_comment{
		display: flex;
	}
	
	.zan_comment_zhuanfa_count_font{
		font-size: 14px;
		color: #666666;
		margin-left: 3px;
	}
	
	.comment{
		margin-left: 10px;
	}
</style>
